<template>
    <div class="insert">
      <el-form label-width="auto" class="text">
        <el-form-item label="用户id" style="margin-top: 30px 0" >
          <el-input v-model="id" placeholder="请输入用户id"/>
        </el-form-item>
        
        <el-form-item label="预约类型" style="margin-top: 30px 0">
          <el-input placeholder="请输入预约类型" v-model="type"/>
        </el-form-item>
            
        <el-form-item label="预约时间" style="margin-top: 30px 0">
            <el-date-picker v-model="time" 
            style="width: 100%; height: 30px;" />
        </el-form-item>
        <el-form-item label="预约内容" style="margin-top: 30px 0">
          <el-input type="textarea" v-model="content"/>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script  setup>
  import { ref } from 'vue'
  import { defineEmits } from 'vue'
  import { watch } from 'vue'
  
  const id=ref('');
  const type=ref('');
  const time=ref('');
  const content=ref('');
  


  const emits=defineEmits(['yuyueData']);
  watch([id, type, time, content], () => {
    emits('yuyueData', {
        time: time.value,
        id: id.value,
        type: type.value,
        content: content.value
    });
    console.log("数据已传递");
}, { immediate: true });

  </script>
  
  
  <style lang="less" scoped>
      .avatar-uploader .avatar {
      width: 178px;
      height: 178px;
      display: block;
      }
      
      .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
      }
  
      .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
      }
  
      .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
      }
  
      .insert {
  
          padding: 30px 10px;
  
          .text {
  
              font-weight: 700;
  
              .def {
                   font-weight: 100;
              }  
  
              /deep/ .el-select__wrapper {
                  min-height: 35px;
              }
  
              .sel {
                  width: 210px;
              }
          }   
      }
  </style>